<template>
    <div class="root">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><img src="../assets/5d540a017c395.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../assets/5dc054a7011bb.jpg" alt=""></div>
                <div class="swiper-slide"><img src="../assets/58bfbd40b1d73.jpg" alt=""></div>
            </div>
            <!-- 如果需要分页器 -->
            <div class="swiper-pagination"></div>

            <!-- 如果需要导航按钮 -->
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
        <div class="one">
            <p class="p1">INFINI （映纷创意）是一家独立创新营销公司，致力于创造会流动的美好创意。我们从策略与洞察出发，
                不断探索营销和创意的多元表达，用创作精神为品牌提供更具生命力的跨媒体整合营销服务。</p>
            <div class="img1">
                <img :src="v1" alt="" v-for="(v1,i) in icoimg" :key="i">

            </div>
            <div class="content" id="content">
                <div class="content-a" v-for="(v,i) in Conte1" :key="i" >
                    <div class="content-img">
                        <div class="content-top"><p>{{v.top1}}</p>
                            <p>{{v.top2}}</p></div>
                        <img :src="v.img" alt=""></div>
                    <p class="content-p">{{v.p1}}</p>
                </div>
            </div>
        </div>

    </div>
</template>

<script>

    import SwiperCore, {Autoplay, Pagination} from 'swiper';
    SwiperCore.use([Autoplay, Pagination, Navigation]);
    import {Swiper, Navigation,} from 'swiper';
    export default {
        name: "Lub",
        components: {
            Autoplay,
            Pagination,
            Navigation,
            Swiper,
        },
        data() {
            return {
                icoimg: ["http://www.infinistudio.cn/Public/home/images/1.jpg",
                    "http://www.infinistudio.cn/Public/home/images/2.jpg", "http://www.infinistudio.cn/Public/home/images/1.jpg",
                    "http://www.infinistudio.cn/Public/home/images/2.jpg", "http://www.infinistudio.cn/Public/home/images/1.jpg",
                    "http://www.infinistudio.cn/Public/home/images/2.jpg", "http://www.infinistudio.cn/Public/home/images/1.jpg",
                    "http://www.infinistudio.cn/Public/home/images/2.jpg", "http://www.infinistudio.cn/Public/home/images/1.jpg",
                    "http://www.infinistudio.cn/Public/home/images/2.jpg", "http://www.infinistudio.cn/Public/home/images/1.jpg",
                    "http://www.infinistudio.cn/Public/home/images/2.jpg",],
                Conte1: [
                    {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc04e0dd731a.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54050fead9a.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54040e5db4d.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d5402e487ab0.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2018-12-24/5c20837a904a3.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2018-08-07/5b69455ac457d.jpg"
                },{
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc04e0dd731a.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54050fead9a.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54040e5db4d.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d5402e487ab0.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2018-12-24/5c20837a904a3.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2018-08-07/5b69455ac457d.jpg"
                },{
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc04e0dd731a.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54099602275.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54050fead9a.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d54040e5db4d.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-08-14/5d5402e487ab0.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2019-11-05/5dc054a6f16f2.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2018-12-24/5c20837a904a3.jpg"
                }, {
                    top1: "小米",
                    top2: "安居房间爱上了肯德基阿拉",
                    p1: "小米1",
                    img: "http://www.infinistudio.cn/Public//Upload/2018-08-07/5b69455ac457d.jpg"
                },],



            }
        },
        mounted() {
            new Swiper('.swiper-container', {
                loop: true,
                autoplay: {
                    delay: 2000,
                    disableOnInteraction: false
                },
                pagination: {
                    el: '.swiper-pagination',
                    type: 'bullets',
                    clickable: true
                },
                navigation: {
                    nextEl: '.swiper-button-next',
                    prevEl: '.swiper-button-prev',
                },
            })
        },
    }
</script>

<style scoped>
    .swiper-slide img {
        width: 100%;
    }

    .swiper-container {
        width: 80%;
        /*height: ;*/
    }

    .one {
        width: 80%;
        margin: 0 auto;
        /* background-color: rgb(189, 41, 41); */
    }

    .p1 {
        padding-top: 20px;
        padding-bottom: 20px;
        border-top: 1px solid rgb(149, 149, 149);
        border-bottom: 1px solid rgb(149, 149, 149);
        text-indent: 2em;
    }

    .img1 img {
        margin: 1%;
        width: 5%;
    }

    .content {
        display: flex;
        justify-content: space-between;
        width: 100%;
        flex-wrap: wrap;
    }

    .content-a {
        width: 30%;
        text-align: center;
        overflow: hidden;
        border-radius: 3%;
        position: relative;
        margin-top: 20px;
    }

    .content-img img {
        width: 100%;
        vertical-align: top;
        /*background-color: olive;*/
    }

    .content-p {
        background-color: white;
        vertical-align: top;
        height: 30px;
        line-height: 30px;
    }

    .content-top {
        background-color: rgba(0, 0, 0, 0.4);
        position: absolute;
        top: 0;
        /*background-color: white;*/
        width: 100%;
        height: 100%;
        text-align: center;
        display: none;
    }

    .content-top p {
        color: white;
        margin-top: 5px;
    }

    .content-top p:first-child {
        margin-top: 20%;
        font-size: 20px;

    }

    .content-a:hover .content-top {
        display: block;
    }
</style>